<template>
    <view class="top_nav">
        <hy-navbar :title="title">
			<template v-slot:right>
				<view class="user_pic" @click="openUser">
					<uv-image width="32" height="32" shape="circle" :src="userPic"></uv-image>
				</view>
			</template>
		</hy-navbar>
		<user ref="userDrawer"></user>
    </view>
</template>

<script>
import { inject } from 'vue';
import { userStore } from '@/stores'
import defaultPic from '@/static/images/user/nav_logo.png'
import hyNavbar from "./hy_navbar.vue"
import user from "@/pages/user/index.vue"
export default {
    components: {
        hyNavbar,
		user
    },
	props: {
		title: {
			type: String,
			default: ''
		}
	},
    data() {
        return {

        }
    },
	computed: {
		userInfo() {
			const {userInfo} = userStore()
			return userInfo
		},
		userPic() {
			const global = inject('global');
			const { userInfo } = userStore()
			return this.userInfo?.avatar?(global.baseFileUrl + this.userInfo.avatar) : defaultPic
		}
	},
    methods: {
		// 打开用户抽屉
		openUser() {
			this.$refs.userDrawer?.open();
		}
    }
}
</script>

<style scoped lang="scss">
	.top_nav {
		overflow: hidden;
		height: 400rpx;
		&::before {
			background: linear-gradient(180deg, $uv-primary, $uv-secondary);
			width: 140%;
			margin-left: -20%;
			height: 400rpx;
			border-radius: 0 0 100% 100%;
			content: '';
			display: block;
		}
		.user_pic {
			width: 88rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>